<template>
    <div>
        <a-card style="min-height: 800px;">
            <p slot="title">
                设备信息详情
            </p>
            <table class="newBorder" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="bbiao">设备名称：</td>
                    <td class="bbiaoTxt">IPSec/SSL综合安全网关{{deviceMsg.deviceName}}</td>
                </tr>
                <tr>
                    <td class="bbiao">设备型号：</td>
                    <td class="bbiaoTxt">WT-QVPN1000S{{deviceMsg.deviceModelNum}}</td>
                </tr>
                <tr>
                    <td class="bbiao">软件版本：</td>
                    <td class="bbiaoTxt">V2.0.0{{deviceMsg.softwareVersion}}</td>
                </tr><tr>
                    <td class="bbiao">硬件版本：</td>
                    <td class="bbiaoTxt">V3.0.0{{deviceMsg.hardwareVersion}}</td>
                </tr><tr>
                    <td class="bbiao">内核版本：</td>
                    <td class="bbiaoTxt">V5.2.1.5{{deviceMsg.kernelVersion}}</td>
                </tr><tr>
                    <td class="bbiao">设备序列号：</td>
                    <td class="bbiaoTxt">ID2023020700001{{deviceMsg.deviceId}}</td>
                </tr>
            </table>
        </a-card>
        <div class="spinBox" v-if="spinning">{{spinText}}</div>
    </div>
</template>

<script>
    export default {
        name: 'deviceMsg',
        data () {
            return {
                id:0,
                spinning:false,
                spinText:'',
                deviceMsg:{},
            }
        },
        created () {
            //this.init ()
        },
        methods: {
            /**
             * Function    : init
             * Description : 初始化列表
             * Input       : none
             * Return      : none
             */
            init () {
                let _this = this
                this.$get('/dev/devInfo').then(res => {
                    if (res.code === 0) {
                        _this.deviceMsg = res.data
                    } else {
                        _this.$message.error(res.message)
                    }
                })
            },
        },
        destroyed () {
        }
    }
</script>
<style lang="less" scoped>
    .newBorder{
        color: #6d7581; width: 95%; margin: 20px auto 50px;border-right: 1px solid #e2e3e7;
        border-top: 1px solid #e2e3e7;
        .bbimg{ width: 300px; text-align: center}
        .bbiao{
            border-bottom: 1px solid #e2e3e7;border-left: 1px solid #e2e3e7; padding:  12px 10px;
            width:160px;  background: #f7f8fb; text-align: right;border-right: 1px solid #e2e3e7;
        }
        .bbiaoTxt{width: auto;border-bottom: 1px solid #e2e3e7;padding: 10px 20px;
        color: #464d5b; font-style: italic}
    }
</style>
